<template>
  <div class="goodsInfo">
<!--    <div class="goodsInfo-left">-->
<!--      <div class="info-left-title">参与优惠打折的门店</div>-->
<!--      <el-table-->
<!--        :data="list"-->
<!--        border-->
<!--        fit-->
<!--        highlight-current-row-->
<!--        style="width: 100%;">-->
<!--        <el-table-column label="ID" prop="id" align="center">-->
<!--          <template slot-scope="{row}">-->
<!--            <span>{{ row.id_public_agent_info }}</span>-->
<!--          </template>-->
<!--        </el-table-column>-->
<!--        <el-table-column label="门店名称" align="center">-->
<!--          <template slot-scope="{row}">-->
<!--            <span>{{ row.agent_name }}</span>-->
<!--          </template>-->
<!--        </el-table-column>-->
<!--      </el-table>-->
<!--    </div>-->
    <div class="goodsInfo-right">
      <el-tabs v-model="activeName" @tab-click="togglePage">
        <el-tab-pane label="品类选择" name="1001">
          <div class="goods-type">
            <div class="type-item" v-for="(item, index) of typeData" :key="index">
              <el-checkbox @change="handleCheckAllChange(item)">
                {{ item.type_name }}
              </el-checkbox>
<!--              <div class="child-item">-->
<!--                <div class="item-content" v-for="(cItem, cIndex) of item.childData" :key="cIndex">-->
<!--                  <el-checkbox :checked="item.isCheck" @change="selectChildType(cItem, cIndex)">-->
<!--                    {{cItem.type_name}}-->
<!--                  </el-checkbox>-->
<!--                </div>-->
<!--              </div>-->
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane label="单品选择" name="2002">
          <div class="select-all">
            <el-checkbox :indeterminate="isIndeterminate1" v-model="checkAllGoods" @change="handleCheckAllGoods">全选</el-checkbox>
            <div style="margin: 15px 0;"></div>
          </div>
          <div class="goods-data">
            <el-checkbox-group v-model="checkList">
              <div class="goods-item" v-for="(item, index) of goodsData" :key="index">
                <el-image :src="item.goods_main_image"></el-image>
                <el-checkbox :label="item.id_public_goods_info" @change="selectGoods(item, index)">
                  <div class="goods-text">{{ item.goods_name }}</div>
                  <div class="goods-text">规格: {{ item.minimal_describe }}</div>
                  <span>ID: {{item.id_public_goods_info}}</span>
                </el-checkbox>
              </div>
            </el-checkbox-group>
            <!-- 分页控件 -->
            <div class="mt-pagination">
              <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page.sync="currentPage"
                :page-size="pageSize"
                layout="total, prev, pager, next, jumper"
                :total="totalPage"
                background>
              </el-pagination>
            </div>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
import {goodsList} from '@/api/goods';

export default {
  name: 'GoodsInfo',
  data() {
    return {
      list: [],
      activeName: '1001',
      typeData: [],
      goodsData: [],
      id_public_goods_type: '',
      typeStatus: -9999,
      checkedGoods: [],
      checkedTypes: [],

      checkList: [],
      checkGoods: [],
      isIndeterminate1: false,
      checkAllGoods: false,

      checkAll: false,
      checkedCities: [],
      isIndeterminate: false,

      // 分页数据
      currentPage: 0,
      pageSize: 12,
      totalPage: 100,
      currentPage1: 0,
      pageSize1: 10,
      totalPage1: 100,

      typeListQuery: {
        invoke_method: 'public_page_4m_load_main_cls',
        filter_type: 1,
        pre_db_para_is_online: 0,
        pre_db_para_open_time_require_select: 0,
        pre_cmd_para_show_admin_type: 'super_and_login',
        pre_db_para_begin_idx: 0,
        pre_db_para_length_4_list: 1000,
      },
      childTypeQuery: {
        invoke_method: 'public_page_4m_load_child_cls',
        pre_db_para_is_online: 0,
        pre_db_para_id_public_goods_type: null,
        pre_db_para_sort_name: 'time_update',
        pre_db_para_sort_type: 'asc',
        pre_db_para_begin_idx: 0,
        pre_db_para_length_4_list: 1000,
      },
      goodsListQuery: {
        filter_type: 1,
        pre_db_para_id_public_goods_type: null,
        pre_db_para_type_child: null,
        pre_db_para_id_public_goods_info: null,
        pre_db_para_goods_name: null,
        invoke_method: 'public_page_4m_load_goods_list',
        pre_db_para_begin_idx: 0,
        pre_db_para_length_4_list: 10
      }
    }
  },
  mounted() {
    this.getGoodsType()
    this.getGoodsInfo()
  },
  methods: {
    // 分页处理
    handleSizeChange(val) {
      this.checkAllGoods = false
      this.getGoodsInfo();
    },
    handleCurrentChange(val) {
      this.checkAllGoods = false
      this.goodsListQuery.pre_db_para_begin_idx = this.goodsListQuery.pre_db_para_length_4_list * (val - 1)
      this.getGoodsInfo();
    },

    handleSizeChange1(val) {
      this.getAgentInfo(val - 1);
    },
    handleCurrentChange1(val) {
      this.getAgentInfo(val - 1);
    },


    /** 获取一级分类数据 */
    getGoodsType() {
      goodsList(this.Qs.stringify(this.typeListQuery)).then(response => {
        console.log(response)
        this.typeData = response.page_content;
        this.typeData.forEach(item => {
          item.isChecked = false;
          // this.getChildType(item.id_public_goods_type);
        })
      })
    },
    /** 获取二级分类数据 */
    getChildType(id) {
      this.childTypeQuery.pre_db_para_id_public_goods_type = id
      goodsList(this.Qs.stringify(this.childTypeQuery)).then(response => {
        console.log(response)
        response.page_content.forEach(item => {
          item.isCheck = false;
        })
        console.log(id)
        this.typeData.forEach(item => {
          if (item.id_public_goods_type === id) {
            item.childData = response.page_content;
            item.checkData = [];
          }
        })

        console.log(this.typeData)
      })
    },
    /** 获取页面商品数据 */
    getGoodsInfo() {
      goodsList(this.Qs.stringify(this.goodsListQuery)).then(response => {
        this.goodsData = response.page_content;
        this.totalPage = response.result_num;
        this.goodsData.forEach(item => {
          item.isCheck = false;
        })
      })
    },
    /** 搜索商品 */
    searchGoods(item, index) {
      this.typeStatus = index;
      this.id_public_goods_type = item.id_public_goods_type;
      this.getGoodsInfo(0);
    },

    /** 选择商品 */
    selectGoods(item, index) {
      if (item.isCheck) {
        this.checkedGoods.splice(index, 1);
        item.isCheck = false;
      } else {
        this.checkedGoods.push(item.id_public_goods_info);
        item.isCheck = true;
      }


    },

    /*
    * 选择全部商品
    * */
    handleCheckAllGoods(val) {
      console.log(val)
      if (val) {
        this.goodsData.forEach(item => {
          console.log(item.id_public_goods_info)
          this.checkList.push(item.id_public_goods_info);
        })
      } else {
        this.checkList = [];
      }
    },

    /*
        * 选择一级分类
        * */
    handleCheckAllChange(item) {
      if (item.isCheck) {
        this.checkedTypes.splice(index, 1);
        item.isCheck = false;
      } else {
        this.checkedTypes.push(item.id_public_goods_type);
        item.isCheck = true;
      }
    },
    /** 选择二级分类 */
    selectChildType(item, index) {
      if (item.isCheck) {
        this.checkedTypes.splice(index, 1);
        item.isCheck = false;
      } else {
        this.checkedTypes.push(item.id_public_goods_type);
        item.isCheck = true;
      }
    },

    /** tab切换 */
    togglePage(val) {
      console.log(val)
      this.$confirm('切换后已选商品或分类会清空,确定要切换吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        if (val.name === '1001') {
          this.checkedGoods = [];
          this.checkList = [];
          this.checkAllGoods = [];
        } else {
          this.getGoodsType()
          this.checkedTypes = [];
        }
      }).catch(() => {
        if (val.name === '1001') {
          this.activeName = '1002';
        } else {
          this.activeName = '1001';
        }
      });

    },
  }
}
</script>

<style scoped lang="scss">
@import "../../../styles/variables";

.goodsInfo {
  padding: 36px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  .goodsInfo-left {
    width: 40%;
    .info-left-title {
      background-color: $mainColor;
      color: #FFFFFF;
      padding: 12px 0;
      text-align: center;
      font-size: 16px;
    }
  }
  .goodsInfo-right {
    width: 75%;
    border: 2px solid $mainColor;
    margin: 0 auto;

    ::v-deep {
      .el-tabs__nav {
        width: 100%;
        .el-tabs__item {
          width: 50%;
          text-align: center;
        }
      }
      .el-tabs__active-bar {
        width: 50% !important;
      }
    }
  }
}

.goodsInfo-right {
  ::v-deep .el-tabs__nav {
    width: 100%;
    .el-tabs__item {
      width: 50%;
      text-align: center;
    }
  }
  .goods-type {
    height: 300px;
    overflow: auto;
    .type-item {
      margin-bottom: 36px;
    }

    .child-item {
      display: flex;
      flex-wrap: wrap;
      margin-right: 16px;
      margin-top: 8px;
      .item-content {
        width: 170px;
      }
      .el-checkbox {
        margin-bottom: 8px;
        margin-right: 8px;
      }
    }
  }
  .type-info {
    height: 100px;
    display: flex;
    flex-wrap: wrap;
    overflow: auto;
    border: 1px solid #e3e3e3;
    margin-bottom: 24px;
    .type-item {
      padding: 10px 16px;
      cursor: pointer;
      user-select: none;
      &:hover {
        color: #319BFF;
      }
      &.current {
        color: #319BFF;
      }
    }
  }
  .goods-data {
    .el-checkbox-group {
      display: flex;
      flex-wrap: wrap;
    }

    .goods-item {
      width: 150px;
      text-align: center;
      margin-bottom: 36px;
      .el-image {
        width: 100px;
        height: 100px;
        border: 1px solid #e3e3e3;
        padding: 12px;
        box-sizing: content-box;
        margin-bottom: 12px;
      }
      .goods-text {
        overflow: hidden;
        text-overflow:ellipsis;
        white-space: nowrap;
        margin-bottom: 6px;
        width: 110px;
      }
    }
  }
}
</style>
